<template>
  <div>
    <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
      <el-row>
        <el-col :span="8">
          <a class="sub-title" id="regInfo">
            <svg-icon class-name="arrow-left" icon-class="arrow-left"></svg-icon>
            <span class="title">执业注册信息</span>
            <span class="num">{{ props.total }}</span>
          </a>
        </el-col>
        <!-- <el-col :span="16" class="flex justify-end">
          <div class="flex justify-end">
            <el-date-picker v-model="dateRange" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
              start-placeholder="开始日期" end-placeholder="结束日期" style="width: 240px;"></el-date-picker>
            <el-input v-model="queryParams.keywords" placeholder="请输入关键词" clearable
              style="width: 240px; margin-left: 15px;" @keyup.enter="handleQuery" />
            <el-button class="ml10" type="primary" icon="Search" @click="handleQuery">查看</el-button>
          </div>
        </el-col> -->
      </el-row>
    </el-form>
    <el-table class="mt15" v-loading="loading" :data="dataList" stripe>
      <el-table-column label="序号" type="index" width="60" />
      <el-table-column label="注册类别" prop="registerLevelName" />
      <el-table-column label="证书编号" prop="certificateNo" />
      <el-table-column label="注册编号" prop="registerCode" />
      <el-table-column label="证书专业" prop="registerMajor" />
      <el-table-column label="证书有效期" prop="validDate" />
      <el-table-column label="数据来源" prop="comanyMohurdUrl">
        <template #default="scope">
          <el-link type="primary" :href="scope.row.comanyMohurdUrl" target="_blank">四库一平台</el-link>
        </template>
      </el-table-column>
      <el-table-column label="证书变更记录" prop="recordQty">
        <template #default="scope">
          <a v-if="!!scope.row.recordQty" class="link" @click="handleLook(scope.row)">查看(<span>{{ scope.row.recordQty
              }}</span>)</a>
          <div v-else>--</div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <el-dialog title="证书变更记录" v-model="open" width="700px" :align-center="true" append-to-body>
      <div v-for="item in recordList" :key="item.id" class="history-list">
        <div class="history-item">
          <div class="time">
            <div class="day">{{ item.day }}</div>
            <div class="date">{{ item.date }}</div>
          </div>
          <div class="history-info">
            <div class="tag">{{ item.actionName }}</div>
            <div class="desc" v-if="!item.actionCompany">
              <span>
                <label>原聘用企业：</label>
                <a class="link">{{ item.oldCompany || '--' }}</a>
              </span>
              <span>
                <label>新聘用企业：</label>
                <a class="link">{{ item.newCompany || '--' }}</a>
              </span>
            </div>
            <div class="desc" v-else>
              <span>
                <label>{{ item.majorName }} &nbsp; &nbsp;</label>
              </span>
              <span>
                <a class="link">{{ item.actionCompany || '--' }}</a>
              </span>
            </div>
          </div>
        </div>
        <svg-icon class-name="icon-time-line" icon-class="icon-time-line"></svg-icon>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import dayjs from 'dayjs'
import { getRegisteredList, getRegisteredRecordList } from '@/api/personnel'
const { proxy } = getCurrentInstance()

const props = defineProps({
  personalId: {
    type: Number,
    default: null,
  },
  total: {
    type: Number,
    default: 0,
  },
})

const loading = ref(false)
const total = ref(0)
const dateRange = ref([])
const open = ref(false)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  personalId: props.personalId, // 人员id
})
const dataList = ref([])
const recordList = ref([])

function getList() {
  loading.value = true
  getRegisteredList(proxy.addDateRangeCustom(queryParams.value, dateRange.value)).then(res => {
    console.log('getRegisteredList:', res)
    loading.value = false
    if (res.code === 200) {
      dataList.value = res.data.list
      total.value = res.data.total
    }
  })
}

async function fetchRegisteredRecordList(id) {
  const res = await getRegisteredRecordList({ registeredId: id })
  if (res.code === 200) {
    recordList.value = res.data.map(item => {
      return {
        ...item,
        day: item.actionDate ? dayjs(item.actionDate).format('DD') : '',
        date: item.actionDate ? dayjs(item.actionDate).format('YYYY-MM') : '',
      }
    })
  }
  return res
}

async function handleLook(item) {
  await fetchRegisteredRecordList(item.id)
  open.value = true
}

getList()
</script>

<style lang="scss" scoped>
.sub-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 500;

  .title {
    color: #333333;
    margin-left: 7px;
    margin-right: 5px;
  }

  .num {
    color: #aa261d;
  }
}

.el-table {
  .link {
    color: #333333;

    span {
      color: #CC392F;
    }
  }
}

.history-list {
  &:not(:first-child) {
    margin-top: 24px;
  }

  .history-item {
    display: flex;
  }

  .history-info {
    background: #F9F5F6;
    border-left: 3px solid #AA261D;
    border-radius: 4px;
    display: flex;
    padding: 8px 16px 8px 16px;
  }

  .time {
    margin-right: 15px;
    width: 70px;
  }

  .day {
    color: #333333;
    font-size: 18px;
    font-weight: 500;
  }

  .date {
    color: #666666;
    font-size: 14px;
    font-weight: 300;
  }

  .tag {
    border-radius: 4px;
    background: #FFEEED;
    display: flex;
    align-items: center;
    color: #AA261D;
    font-size: 14px;
    height: 28px;
    padding: 0 8px;
    min-width: 100px;
    justify-content: center;
  }

  .desc {
    color: #646566;
    display: flex;
    align-items: center;
    font-size: 15px;

    >span {
      margin-left: 8px;
    }

    .link {
      color: #2A82E4;
    }
  }

  .svg-icon {
    width: 4px;
    height: 27px;
  }
}
</style>